import React from "react";
import styled from "@emotion/styled";

interface SwitchProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
  className?: string;
  label?: string;
}

export type { SwitchProps };

const sizes = {
  small: {
    width: "36px",
    height: "20px",
    thumb: "16px",
  },
  medium: {
    width: "44px",
    height: "24px",
    thumb: "20px",
  },
  large: {
    width: "52px",
    height: "28px",
    thumb: "24px",
  },
};

const SwitchContainer = styled.label<{ disabled?: boolean }>`
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  user-select: none;
  min-height: 44px; /* 触摸目标最小尺寸 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  @media (max-width: 768px) {
    min-height: 36px;
    gap: 0.625rem;
    padding: 0.125rem 0;
  }
`;

const HiddenInput = styled.input`
  position: absolute;
  opacity: 0;
  pointer-events: none;
`;

const SwitchTrack = styled.div<{
  checked?: boolean;
  disabled?: boolean;
  size: "small" | "medium" | "large";
}>`
  position: relative;
  width: ${(props) => sizes[props.size].width};
  height: ${(props) => sizes[props.size].height};
  border-radius: 999px;
  background: ${(props) =>
    props.checked
      ? "var(--accent-color, #3b82f6)"
      : "var(--border-color, #d1d5db)"};
  transition: background-color 0.2s ease;
  flex-shrink: 0;

  @media (max-width: 768px) {
    min-width: 40px;
    min-height: 22px;
  }

  &:hover {
    background: ${(props) =>
      props.checked
        ? "var(--accent-color-hover, #2563eb)"
        : "var(--border-color-hover, #9ca3af)"};
  }
`;

const SwitchThumb = styled.div<{
  checked?: boolean;
  size: "small" | "medium" | "large";
}>`
  position: absolute;
  top: 2px;
  left: ${(props) =>
    props.checked ? `calc(100% - ${sizes[props.size].thumb} - 2px)` : "2px"};
  width: ${(props) => sizes[props.size].thumb};
  height: ${(props) => sizes[props.size].thumb};
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
`;

const Label = styled.span`
  font-size: 0.9rem;
  color: var(--text-primary, #1f2937);
  line-height: 1.5;
`;

export const Switch: React.FC<SwitchProps> = ({
  checked = false,
  onChange,
  disabled = false,
  size = "medium",
  className,
  label,
}) => {
  const handleChange = (e: React.MouseEvent | React.ChangeEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    if (!disabled && onChange) {
      onChange(!checked);
    }
  };

  return (
    <SwitchContainer
      disabled={disabled}
      className={className}
      onClick={(e) => {
        e.preventDefault(); // 阻止默认行为
        handleChange(e);
      }}
    >
      <HiddenInput
        type="checkbox"
        checked={checked}
        disabled={disabled}
        readOnly // 改为只读，防止重复触发
      />
      <SwitchTrack checked={checked} disabled={disabled} size={size}>
        <SwitchThumb checked={checked} size={size} />
      </SwitchTrack>
      {label && <Label>{label}</Label>}
    </SwitchContainer>
  );
};

export default Switch;
